
<template>
  <div>
    <div class="transformDiv">
      <a v-for="(item, index) in dataList" :key="index" :href="item.a">
        <dl
          :class="{
            expanded: index === selectedDlIndex,
            hovered: item.isHovered,
          }"
        >
          <dd>{{ item.text }}</dd>
          <dt><img :src="item.img" alt="路径" /></dt>
        </dl>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          a: "https://blog.csdn.net/m0_67840539/article/details/130739942",
          text: "行业领先者",
          img: require("./img/2.jpg"),
        },
        {
          a: "https://blog.csdn.net/m0_67840539/article/details/130739942",
          text: "高端市场",
          img: require("./img/2.jpg"),
        },
        {
          a: "https://blog.csdn.net/m0_67840539/article/details/130739942",
          text: "品牌代言人",
          img: require("./img/2.jpg"),
        },
        {
          a: "https://blog.csdn.net/m0_67840539/article/details/130739942",
          text: "中控场王",
          img: require("./img/2.jpg"),
        },
        {
          a: "https://blog.csdn.net/m0_67840539/article/details/130739942",
          text: "技术大佬",
          img: require("./img/2.jpg"),
        },
      ],
      selectedDlIndex: 0,
    };
  },
  created(){
    //  this.onMouseOver(0)
  },
  methods: {
    // onMouseOver(index) {
    //   this.$set(this.dataList[index], "isHovered", true);
    //   console.log(this.dataList,"dataList");
    // },
    // onMouseLeave(index) {
    //   if (index !== this.selectedDlIndex) {
    //     this.$set(this.dataList[index], "isHovered", false);
    //   }
    // },
  },
};
</script>
<style scoped lang="scss">
.transformDiv {
  width: 1100px;
  height: 500px;
  background: #eee;
  display: flex;
  justify-content: space-around;
}
.transformDiv dl {
  width: 100px;
  height: 300px;
  margin-top: 80px;
  background: #73c6e9;
  border-radius: 10px;
  opacity: 0.8;
  transition: all 0.5s ease;
  display: flex;
  justify-content: space-between;
}
.transformDiv dl dd {
  display: none;
}
.transformDiv dl dt img {
  width: 100px;
  height: 300px;
}
.transformDiv dl:not(.expanded):hover,
.transformDiv dl.expanded:hover {
  width: 500px;
  height: 300px;
  dd {
    display: block;
  }
}
</style>
